<template>
	<view class="my-team">
		<!-- 我的团队 -->
		<u-navbar leftIconSize="34rpx" autoBack :placeholder="true" bgColor="#ffffff">
			<view class="" slot="center">
				<text class="c-000 pf-sc fw-600" style="font-size: 34rpx;">我的团队</text>
			</view>
		</u-navbar>
		<view
			class="set-data-container w-750 b-box d-flex flex-c ali-i-c  bg-fa po-re"
			style=""
			:style="{ height: containerHeight }"
		>
			<!-- tabs -->
			<view class="w-100 bg-ff b-box d-flex flex-r ali-i-c just-c">
				<view class="d-flex flex-r ali-i-c just-c b-box bg-ff" style="height: 92rpx;width: 600rpx;">
					<u-tabs
						:list="TabList"
						lineColor="#FFD300"
						@click="tabsClick"
						
						:inactiveStyle="{
							color: '#666666',
							fontSize: '32rpx',
							fontWeight: '400',
							fontFamily: 'PingFang SC'
						}"
						:activeStyle="{
							color: '#262626',
							fontSize: '32rpx',
							fontWeight: '500',
							fontFamily: 'PingFang SC'
						}"
						lineWidth="40rpx"
						:lineBottom="'12rpx'"
						:itemStyle="{
							height: '88rpx',
							width: '220rpx',
							backgroundColor: 'rgba(255,255,255,0)'
						}"
						:current="TabCurrent"
						lineHeight="6rpx"
					></u-tabs>
				</view>
			</view>
			<!-- list -->
			<view :style="{ height: listHeight }" class="w-750 ">
				<swiper
					@animationfinish="swiperChange"
					v-if="listHeight"
					:style="{ height: listHeight, width: '100%' }"
					width="100%"
					:skip-hidden-item-layout="false"
					:height="listHeight"
					bgColor="#F7F7F7"
					:radius="0"
					:current="TabCurrent"
					easing-function="easeInOutCubic"
					:disable-touch="false"
				>
					<swiper-item>
						<scroll-view
							:style="{ height: listHeight }"
							scroll-y="true"
							v-if="listHeight"
							:refresher-enabled="true"
							:refresher-threshold="45"
							enable-flex="true"
							refresher-default-style="black"
							:refresher-triggered="refresher_triggered0"
							refresher-background="#f7f7f7"
							@refresherrefresh="refresherrefresh"
							:lower-threshold="50"
							@scrolltolower="scrolltolower"
						>
							<view
								class=" d-flex flex-c just-s ali-i-c b-box bg-ff"
								:style="{ height: listHeight }"
							>
								<view
									class="w-750 b-box bg-ff"
									style="padding: 0rpx 32rpx 0rpx;"
									v-if="dataList0.length > 0"
								>
									<view
										v-for="(item, index) of dataList0"
										:key="index"
										class="w-100 b-box d-flex flex-r ali-i-c just-sw"
										style="height: 116rpx;border-bottom:2rpx solid #f6f6f6"
									>
										<view class="b-box d-flex flex-r ali-i-c just-s">
											<view
												style="width: 72rpx;height: 72rpx;border-radius: 100rpx;overflow: hidden;margin-right: 12rpx;"
											>
												<image
													:src="'https://www.chejingjing.cn'+item.avatar"
													style="width: 72rpx;height: 72rpx;"
												></image>
											</view>
											<text class="pf-sc fw-400 c-333 " style="font-size: 28rpx;">
												{{ item.nickname }}
											</text>
										</view>
										<view>
											<text class="pf-sc fw-400" style="font-size: 24rpx;color: #999999;">
												{{ item.createtime }}
											</text>
										</view>
									</view>
								</view>
								<!-- 空状态 -->
								<view
									class=" d-flex flex-c ali-i-c just-c"
									:style="{ height: parseFloat(listHeight) / 2 + 'px' }"
									v-else
								>
									<text
										style="font: 500 30rpx PingFang SC;color:#B3B3B3 ;margin-top: 30rpx;"
									>
										数据为空
									</text>
<!-- 									<text
										v-else
										style="font: 500 30rpx PingFang SC;color:#B3B3B3 ;margin-top: 30rpx;"
									>
										加载中...
									</text> -->
								</view>
							</view>
						</scroll-view>
					</swiper-item>
					<swiper-item>
						<scroll-view
							:style="{ height: listHeight }"
							scroll-y="true"
							v-if="listHeight"
							:refresher-enabled="true"
							:refresher-threshold="45"
							enable-flex="true"
							refresher-default-style="black"
							:refresher-triggered="refresher_triggered1"
							refresher-background="#f7f7f7"
							@refresherrefresh="refresherrefresh"
							:lower-threshold="50"
							@scrolltolower="scrolltolower"
						>
							<view class=" d-flex flex-c just-s ali-i-c bg-ff" :style="{ height: listHeight }">
								<view
									class="w-750 b-box bg-ff"
									style="padding: 0rpx 32rpx 0rpx;"
									v-if="dataList1.length > 0"
								>
									<view
										v-for="(item, index) of dataList1"
										:key="index"
										class="w-100 b-box d-flex flex-r ali-i-c just-sw"
										style="height: 116rpx;border-bottom:2rpx solid #f6f6f6"
									>
										<view class="b-box d-flex flex-r ali-i-c just-s">
											<view
												style="width: 72rpx;height: 72rpx;border-radius: 100rpx;overflow: hidden;margin-right: 12rpx;"
											>
												<image
													:src="'https://www.chejingjing.cn'+item.avatar"
													style="width: 72rpx;height: 72rpx;"
												></image>
											</view>
											<text class="pf-sc fw-400 c-333 " style="font-size: 28rpx;">
												{{ item.nickname }}
											</text>
										</view>
										<view>
											<text class="pf-sc fw-400" style="font-size: 24rpx;color: #999999;">
												{{ item.createtime }}
											</text>
										</view>
									</view>
								</view>
								<!-- 空状态 -->
								<view
									class=" d-flex flex-c ali-i-c just-c"
									:style="{ height: parseFloat(listHeight) / 2 + 'px' }"
									v-else
								>
									<text
										style="font: 500 30rpx PingFang SC;color:#B3B3B3 ;margin-top: 30rpx;"
									>
										数据为空
									</text>
<!-- 									<text
										v-else
										style="font: 500 30rpx PingFang SC;color:#B3B3B3 ;margin-top: 30rpx;"
									>
										加载中...
									</text> -->
								</view>
							</view>
						</scroll-view>
					</swiper-item>
				</swiper>
			</view>
		</view>
	</view>
</template>

<script>
import { myteam } from '@/common/api.js';
import { _containerHeight, _addUnit, _rpxTpx } from '@/utils/GetSys.js';
import Utabs from '../components/uview-ui/components/u-tabs/u-tabs.vue';
import Unavbar from '../components/uview-ui/components/u-navbar/u-navbar';
export default {
	components: {
		'u-tabs': Utabs,
		'u-navbar': Unavbar
	},
	data() {
		return {
			containerHeight: '',
			listHeight: '',
			TabList: [
				{
					id: 0,
					name: '直推'
				},
				{
					id: 1,
					name: '间推'
				}
			],
			TabCurrent: 0, //当前选中标签的索引
			// refresher_triggered0: false, //下拉刷新
			// refresher_triggered1: false,
			dataList0: [],
			dataList1: []
			// dataList: {
			// 	dataList0: [],
			// 	dataList1: [],
			// 	requestStatus0: false,
			// 	requestStatus1: false
			// },
			// FalseData: {
			// 	dataList0: [],
			// 	dataList1: []
			// }
		};
	},
	onReachBottom() {
		//上啦加载
	},
	methods: {
		//加载我的团队
		getMyteam() {
			console.log(this.TabCurrent);
			let params = {
				token: uni.getStorageSync('usertoken'),
				type: 1,
				page: 1
			};
			myteam(params).then(res => {
				this.dataList0 = res.data.data.list;
				this.TabList[0].name=`直推（${this.dataList0.length}）`
				this.TabList[1].name=`间推（${this.dataList1.length}）`
			});
		},
		getMyteam2() {
			console.log(this.TabCurrent);
			let params = {
				token: uni.getStorageSync('usertoken'),
				type: 2,
				page: 1
			};
			myteam(params).then(res => {
				this.dataList1 = res.data.data.list;
				this.TabList[0].name=`直推（${this.dataList0.length}）`
				this.TabList[1].name=`间推（${this.dataList1.length}）`
			});
		},
		// ClearRefre_() {
		// 	//重置下拉刷新状态
		// 	for (let index = 0; index < this.TabList.length; index++) {
		// 		this.$set(this, `refresher_triggered${index}_`, false);
		// 	}
		// },
		// ReauestMethod() {
		// 	let TabCurrent = parseInt(this.TabCurrent);
		// 	console.log('ReauestMethod', TabCurrent);
		// 	let list = this.dataList;
		// 	let FalseData = this.FalseData;
		// 	console.log(FalseData);
		// 	console.log(list);
		// 	//模拟请求
		// 	uni.$u.sleep(1000).then(res => {
		// 		switch (TabCurrent) {
		// 			case 0:
		// 				list[`dataList${TabCurrent}`] = this.$set(
		// 					list,
		// 					`dataList${TabCurrent}`,
		// 					list.dataList0.concat(FalseData.dataList0)
		// 				);
		// 				break;
		// 			case 1:
		// 				list[`dataList${TabCurrent}`] = this.$set(
		// 					list,
		// 					`dataList${TabCurrent}`,
		// 					list.dataList1.concat(FalseData.dataList1)
		// 				);
		// 				break;
		// 			default:
		// 				break;
		// 		}
		// 		this[`refresher_triggered${TabCurrent}_`] = false;
		// 		this[`refresher_triggered${TabCurrent}`] = false;
		// 	});
		// },
		// refresherrefresh() {
		// 	//下拉刷新
		// 	console.log(123456789);
		// 	let TabCurrent = parseInt(this.TabCurrent);
		// 	let list = this.dataList;
		// 	if (this[`refresher_triggered${TabCurrent}_`]) return;
		// 	this[`refresher_triggered${TabCurrent}_`] = true;
		// 	if (!this[`refresher_triggered${TabCurrent}`]) {
		// 		this[`refresher_triggered${TabCurrent}`] = true;
		// 		list[`dataList${TabCurrent}`] = this.$set(list, `dataList${TabCurrent}`, []);
		// 		list[`requestStatus${TabCurrent}`] = this.$set(list, `requestStatus${TabCurrent}`, false);
		// 		/**
		// 		 * request
		// 		 * */
		// 		this.ReauestMethod();
		// 	}
		// },
		swiperChange(index) {
			//一级 窗口滑动动画结束后
			this.TabCurrent = parseInt(index.detail.current);
			// // this.ClearRefre_();
			// /**
			//  * request
			//  * */
			// let list = this.dataList;
			// if (list[`dataList${this.TabCurrent}`]['length'] <= 0) {
			// 	// this.ReauestMethod();
			// }
		},
		tabsClick(index) {
			//点击tabs标签栏
			this.TabCurrent = index.id;
			console.log(this.TabCurrent);
			// this.ClearRefre_();

			let params = {
				token: uni.getStorageSync('usertoken'),
				type: this.TabCurrent + 1,
				page: 1
			};
			myteam(params).then(res => {
				if (res.data.code == 1) {
					if (params.type == 1) {
						this.dataList0 = res.data.data.list;
						this.TabList[0].name=`直推（${this.dataList0.length}）`
						this.TabList[1].name=`间推（${this.dataList1.length}）`
					} else if (params.type == 2) {
						this.dataList1 = res.data.data.list;
						this.TabList[0].name=`直推（${this.dataList0.length}）`
						this.TabList[1].name=`间推（${this.dataList1.length}）`
					}
				}
			});
		}
	},
	onLoad() {
		this.containerHeight = _containerHeight();
		this.listHeight = _addUnit(parseInt(this.containerHeight) - _rpxTpx('118rpx'), 'px');
		// this.ReauestMethod()
		this.getMyteam();
		this.getMyteam2()
	}
};
</script>

<style lang="scss">
.my-team {
}
</style>
